<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
    <script src="../js/axios.min.js"></script>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="catbox">
            <table id="cartTable" v-if="carList.length">
                <thead>
                    <tr>
                        <th><label><input class="check-all check" type="checkbox"  v-model="isCheckedAll"  />&nbsp;&nbsp;全选</label></th>
                        <th>商品</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in carList" :key="item.goodsId">
                        <!-- 在checkbox中 v-model使用checked属性和change事件 -->
                        <td class="checkbox"><input class="check-one check" type="checkbox" v-model="item.isChecked" />
                        </td>
                        <td class="goods">
                            <img :src="item.goodsImg" alt="" />
                            <span>{{item.goodsName}}</span>
                        </td>
                        <td class="price">{{item.goodsPrice}}</td>
                        <td class="count">
                            <!-- 
                                cursor: pointer;  小手
                                cursor: not-allowed;  禁用

                             -->
                            <span class="reduce" @click="reduceHandler(item)"
                                :style="{cursor:item.buyNum == 1 ? 'not-allowed' : 'auto'}">{{item.buyNum > 1 ? '-' :
                                ''}}</span>
                            <input class="count-input" type="text" :value="item.buyNum" />
                            <span class="add" @click="addHandler(item)">+</span>
                        </td>
                        <td class="subtotal">{{(item.goodsPrice * item.buyNum).toFixed(2)}}</td>
                        <td class="operation"><span class="delete" @click="delOneHandler(item)">删除</span></td>
                    </tr>
                </tbody>
            </table>
            <div class="foot" id="foot">
                <a class="fl" id="deleteAll" href="javascript:;" @click="delAllHandler">删除</a>
                <div class="fr closing" onclick="getTotal();">结 算</div>
                <input type="hidden" id="cartTotalPrice" />
                <div class="fr total">合计：￥<span id="priceTotal">{{totalPrice}}</span></div>
                <div class="fr selected" id="selected">已选商品<span id="selectedTotal">{{totalNum}}</span>件<span
                        class="arrow up">︽</span><span class="arrow down">︾</span></div>
                <div class="selected-view">
                    <div id="selectedViewList" class="clearfix">
                        <div><img src="../images/1.jpg"><span>取消选择</span></div>
                    </div>
                    <span class="arrow">◆<span>◆</span></span>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

    var vm = new Vue({
        el: "#app",
        data: {
            carList: [],
        },
        methods: {
            getData() {
                axios.get("../data/shoppingCar.json").then(responseOption => {
                    console.log(responseOption.data);
                    if (responseOption.status == 200) {
                        this.carList = responseOption.data;
                    }
                })
            },
            addHandler(item) {
                item.buyNum++;
            },
            reduceHandler(item) {
                if (item.buyNum <= 1) return false;
                item.buyNum--;
            },
            delOneHandler(item) {
                var index = this.carList.indexOf(item);
                this.carList.splice(index, 1);
            },

            // !!!!!!!!!
            delAllHandler() {
                // for(var i = 0;i< this.carList.length;i++){
                //     var item = this.carList[i];
                //     if(item.isChecked){
                //         this.carList.splice(i,1);
                //         i--;
                //     }
                // }

                this.carList = this.carList.filter(v => v.isChecked == false);
            },
            test(item) {
                console.log(item.isChecked);
            }
        },
        computed: {
            // 新建一个全选属性  => 用于控制是否全选

            // isCheckedAll取值: 依赖于carList中的isChecked
            // 1. 所有数据的isChecked 为true, isCheckedAll也为true
            // 2. 只要有一个数据的isChecked 为false,  isCheckedAll也为false

            // isCheckedAll赋值: 修改carList中的isChecked
            // 1. isCheckedAll为true, carList所有数据的isChecked 为true, 
            // 1. isCheckedAll为false, carList所有数据的isChecked 为false, 


            // 此写法isCheckedAll默认只读(只有取值, 没有赋值)
            // isCheckedAll: function () {
            //     var flag = this.carList.every(v => v.isChecked == true);  // 是否全选
            //     return this.carList.length > 0 ? flag : false;  // 有商品时=> 用flag  , 没有商品 不全选
            // }

            // !!!!!!!!!!!
            isCheckedAll: {
                get:function () {
                    var flag = this.carList.every(v => v.isChecked == true);  // 是否全选
                    return this.carList.length > 0 ? flag : false;  // 有商品时=> 用flag  , 没有商品 不全选
                },
                set:function(newVal){
                    console.log("newVal",newVal);

                    this.carList.forEach(v => v.isChecked = newVal);
                }
            },
            totalNum:function(){
                /* 
                var num = 0;
                for(var i = 0;i< this.carList.length;i++){
                    var item = this.carList[i];
                    if(item.isChecked){
                        num += item.buyNum;
                    }
                }
                return num; */

                // var prev = 0;
                // this.carList.forEach((item,index)=>{
                //     if(item.isChecked){
                //         prev += item.buyNum;
                //     }
                // })

                return this.carList.reduce((prev,item)=> item.isChecked ? prev + item.buyNum : prev, 0);
            },
            totalPrice:function(){
                // var price = 0;
                // for(var i = 0;i< this.carList.length;i++){
                //     var item = this.carList[i];
                //     if(item.isChecked){
                //         price += item.goodsPrice * item.buyNum;
                //     }
                // }
                // return price.toFixed(2);

                return this.carList.reduce((prev,item)=> item.isChecked ? prev + item.goodsPrice * item.buyNum: prev, 0).toFixed(2);
            }

        },
        mounted() {
            // axios.get("../data/shoppingCar.json").then(responseOption => {
            //     console.log(responseOption.data);
            //     if(responseOption.status == 200){
            //         this.carList = responseOption.data;
            //     }
            // })

            this.getData();
        }

    })


</script>

</html>